{include file="public/header"/}
<link rel="stylesheet" href="{__PUBLIC_PATH}/admin/pcf/pcfbase.css?v={$version}"/>
<script src="{__PUBLIC_PATH}/common/js/jquery.js?v={$version}"></script>
<script src="{__PUBLIC_PATH}/admin/pcf/global.js?v={$version}"></script>
</head>
<body>
<style type="text/css" media="screen">
  .layui-table{width:100%!important;}
  .layui-table-cell{height:auto!important;}
  @media screen and (max-width:800px){
  .layui-table-cell{width:250px!important;padding:0!important;}
  }
  .layui-table select {border-color:#e6e6e6;height:28px;}
</style>
<div class="layui-form" id="LAY-component-layer-list">
<div class="layui-fluid" style="padding-bottom:83px;border:0;">
<div class="layui-col-sm12">
<div class="layui-card pcf30">
<div style="height:100%;max-width:600px;">
    <div class="layui-form-item">
        <label class="layui-form-label">表单标题</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input field-title" name="title" placeholder="表单标题" lay-verType="tips" lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">需要登录</label>
        <div class="layui-input-block">
            <input type="radio" name="need_login" class="field-need_login" value="0" title="否" checked/>
            <input type="radio" name="need_login" class="field-need_login" value="1" title="是" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">表单状态</label>
        <div class="layui-input-inline">
            <input type="checkbox" lay-filter="status" lay-skin="switch" lay-text="是|否" name="status" value="1" checked>
            <input type="hidden" name="status" value="1">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">表单字段</label>
        <div class="layui-input-inline">
            <button class="layui-btn layui-btn-sm" data-type="addfile">新增字段</button>
        </div>
    </div>
</div>
<div style="width:100%;height:100%;">
    <table lay-filter="parse-table-demo">
      <thead>
        <tr>
          <th lay-data="{field:'attr_name',align: 'center'}">字段名称</th>
          <th lay-data="{field:'input_type',align: 'center'}">字段类型</th>
          <th lay-data="{field:'attr_values',align: 'center'}">可选值(下拉、单选项、多选项)</th>
          <th lay-data="{field:'sort_order',align: 'center'}">排序</th>
          <th lay-data="{field:'field',align: 'center'}">操作</th>
        </tr> 
      </thead>
      <tbody>
      </tbody>
    </table>
</div>
</div>
</div>
<div class="submit-info text-center">
    <button class="layui-btn" lay-submit lay-filter="formSubmit">确认提交</button>
    <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
</div>
<div class="pcfclear"></div>
</div>
</div>
{include file="public/footer"/}
<script>
    layui.use(['layer', 'form' , 'table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        table.init('parse-table-demo');
        // 监听开关
        form.on('switch(status)', function(data){
          var elemId = data.elem.attributes['lay-filter']['nodeValue'];
          if (data.elem.checked) {
            this.value = 1;
          } else {
            this.value = 0;
          }
          $("input[name='"+elemId+"']").val(this.value);
        });
        var field_type_html = '{$field_type_html|raw}';
        //触发事件
        var active = {
            addfile: function(){
               var last_div =  '<tr>' +
                    ' <td align="center">' +
                    '   <div class="layui-table-cell laytable-cell-1-0-0">' +
                    '     <input type="hidden" name="attr_id[]"/>' +
                    '     <input type="text"  name="attr_name[]" value="" class="layui-input" lay-verType="tips" lay-verify="required" required>' +
                    '   </div>' +
                    ' </td>' +
                    ' <td align="center">' +
                    '   <div class="layui-table-cell laytable-cell-1-0-1">' +
                        field_type_html +
                    '   </div>' +
                    ' </td>' +
                    ' <td align="center">' +
                    '   <div class="layui-table-cell laytable-cell-1-0-2">' +
                    '     <textarea name="attr_values[]" placeholder="多个用英文,隔开" class="layui-textarea"></textarea>' +
                    '   </div>' +
                    ' </td>' +
                    ' <td align="center">' +
                    '   <div class="layui-table-cell laytable-cell-1-0-3">' +
                    '     <input type="text" name="sort_order[]" value="100" class="layui-input" onkeyup="this.value=this.value.replace(/[^\\d]/g,\'\');" onpaste="this.value=this.value.replace(/[^\\d]/g,\'\');">' +
                    '   </div>' +
                    ' </td>' +
                    ' <td align="center">' +
                    '   <div class="layui-table-cell laytable-cell-1-0-4">' +
                    '     <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="tr_delete(this)"><i class="layui-icon layui-icon-delete"></i>删除</a>' +
                    '   </div>' +
                    ' </td>' +
                    '</tr>' ;
                $(".layui-table tbody").append(last_div);
                form.render();
                var content = $(".layui-table tbody").html(); 
                if(content != null || content.length != 0) 
                { 
                   $(".layui-none").hide();
                } 
            }
        };
        $(document).on("click","#LAY-component-layer-list .layui-btn",function(){
          var type = $(this).data('type');
          active[type] && active[type].call(this);
        });
        //监听提交
        form.on('submit(formSubmit)',function(data){
            layer.load(2);
            $.ajax({
                type : "post",
                url : "{:url('/guestbook/add')}",
                data : data.field,
                dataType : 'json',
                success : function(res){
                    layer.closeAll('loading');
                    if(res.status){
                        layer.msg(res.msg,{icon:1,time:1000},function(){
                            parent.window.location.href = res.url;
                        });
                    }else{
                       layer.msg(res.msg,{icon:2,time:1000});
                    }
                },
                error: function(e){
                    layer.closeAll('loading');
                    layer.msg("未知错误，操作中断！",{icon:2,time:1000});
                }
            });
            return false;
        });
    });
    function tr_delete(obj) {
        $(obj).parent().parent().parent().remove();
    }
</script>
</body>
</html>